/*
 * #depends subsonic-leftmenu-store.js
 */
Ext.ux.mattgoldspink.LeftMenuPanel = Ext.extend(Ext.Panel, {
    renderTpl: [
		'<h1>Library</h1><div class="{baseCls}-body <tpl if="bodyCls"> {bodyCls}</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>'
	],
    constructor: function() {
        Ext.apply(this, {
            title: 'Library',
            dock: 'left',
            cls: 'leftmenu',
            fit: true,
            layout: 'fit',
            dockedItems: [
                {
                    xtype: 'list',
                    store: new Ext.ux.mattgoldspink.LeftMenuStore({}),
                    itemTpl: '<div id="{id}" class="entry {iconCls}">{name}</div>',
					allowDeselect: false,
					singleSelect: true,
					sorters: 'iconCls',
                    listeners: {
                        itemtap: this.handleTap,
						afterrender: this.initialiseSelectedItem,
						scope: this
                    },
                    fit: true,
					dock:'top', 
                    selectedItemCls: 'selected'
                },
			    new Ext.ux.mattgoldspink.NowPlayingLeftPanel({
					dock: 'bottom'
				})]
        });
        Ext.ux.mattgoldspink.LeftMenuPanel.superclass.constructor.call(this);
    }, 
	initialiseSelectedItem: function(list) {
		Ext.dispatch({
			controller: 'Ext.ux.mattgoldspink.subsonic.controllers.SongView',
			action: 'initLeftBar',
			leftBar : list
		});
	}, 
    handleTap: function(dataView, index, element, e) {
		element = Ext.get(Ext.get(element).query('.entry')[0]);
		var id = element.id;
        if (element.hasCls('music')) {
            Ext.dispatch({
                controller: 'Ext.ux.mattgoldspink.subsonic.controllers.SongView',
                action: 'loadFolder',
				historyUrl: 'songView/musicFolder/' + id
            });
        } else {
			Ext.dispatch({
				controller: 'Ext.ux.mattgoldspink.subsonic.controllers.SongView',
				action    : 'loadFolder',
				historyUrl: 'songView/playlist/'+ id,
				id: id
			});
		}
    }
});
